<template>
    <view>
        <tn-nav-bar  :alpha="true" fixed >
        <span>成长记录</span>
    </tn-nav-bar>
  <view class="container"  :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
   
   

    <!-- 数据概览 -->
    <view class="overview-grid">
      <view class="stat-card gradient-green">
        <view class="stat-content">
          <view class="stat-text">
            <text class="label">身高</text>
            <text class="value">{{ latestRecord.height || '--' }}<text class="unit">cm</text></text>
          </view>
        </view>
        <view class="stat-trend" v-if="heightTrend">
          <uni-icons :type="heightTrendIcon" size="24" :color="trendColor"></uni-icons>
          <text :style="{color: trendColor}">{{ heightDiff }}cm</text>
        </view>
      </view>

      <view class="stat-card gradient-blue">
        <view class="stat-content">
          <view class="stat-text">
            <text class="label">体重</text>
            <text class="value">{{ latestRecord.weight || '--' }}<text class="unit">kg</text></text>
          </view>
        </view>
        <view class="stat-trend" v-if="weightTrend">
          <uni-icons :type="weightTrendIcon" size="24" :color="trendColor"></uni-icons>
          <text :style="{color: trendColor}">{{ weightDiff }}kg</text>
        </view>
      </view>

      <view class="stat-card gradient-purple">
        <view class="stat-content">
          <view class="stat-text">
            <text class="label">头围</text>
            <text class="value">{{ latestRecord.head || '--' }}<text class="unit">cm</text></text>
          </view>
        </view>
        <view class="stat-trend" v-if="headTrend">
          <uni-icons :type="headTrendIcon" size="24" :color="trendColor"></uni-icons>
          <text :style="{color: trendColor}">{{ headDiff }}cm</text>
        </view>
      </view>
    </view>

    <!-- 历史记录 -->
    <view class="history-card">
      <view class="card-header">
        <text class="header-icon">📈</text>
        <text class="header-title">成长轨迹</text>
      </view>

      <view v-if="records.length === 0" class="empty-state">
        <tn-empty mode="data" v-if="Object.keys(records).length ==0"></tn-empty>
      </view>

      <scroll-view v-else scroll-y class="history-list">
        <view 
          v-for="(record, index) in filteredRecords"
          :key="index"
          class="record-item"
          :class="{ 'first-item': index === 0 }"
        >
          <view class="timeline-marker"></view>
          <view class="record-content">
            <text class="record-date">{{ formatDate(record.date) }}</text>
            <view class="record-data">
              <view class="data-item height">
            
                <text>{{ record.height }} cm</text>
              </view>
              <view class="data-item weight">
                <text>{{ record.weight }} kg</text>
              </view>
              <view class="data-item head">
                <text>{{ record.head }} cm</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
</template>

<script>
import { childGet } from "@/api/child.js";
export default {
  data() {
    return {
      currentRecord: {
        date: '',
        height: null,
        weight: null,
        head: null
      },
      records: [
      ]
    };
  },
  computed: {
    latestRecord() {
      return this.records[0] || {};
    },
    filteredRecords() {
      return this.records
        .sort((a, b) => new Date(b.date) - new Date(a.date))
        .slice(0, 6);
    },
    heightTrend() {
      if (this.records.length < 2) return null;
      const diff = this.latestRecord.height - this.records[1].height;
      return diff > 0 ? 'up' : diff < 0 ? 'down' : null;
    },
    weightTrend() {
      if (this.records.length < 2) return null;
      const diff = this.latestRecord.weight - this.records[1].weight;
      return diff > 0 ? 'up' : diff < 0 ? 'down' : null;
    },
    headTrend() {
      if (this.records.length < 2) return null;
      const diff = this.latestRecord.head - this.records[1].head;
      return diff > 0 ? 'up' : diff < 0 ? 'down' : null;
    },
    heightDiff() {
      return Math.abs(this.latestRecord.height - (this.records[1]?.height || 0)).toFixed(1);
    },
    weightDiff() {
      return Math.abs(this.latestRecord.weight - (this.records[1]?.weight || 0)).toFixed(1);
    },
    headDiff() {
      if (this.records.length < 2) return '0.0';
      return (this.latestRecord.head - this.records[1].head).toFixed(1);
    },
    heightTrendIcon() {
      return this.heightTrend === 'up' ? 'up' : 'down';
    },
    weightTrendIcon() {
      return this.weightTrend === 'up' ? 'up' : 'down';
    },
    headTrendIcon() {
      return this.headTrend === 'up' ? 'up' : 'down';
    },
    trendColor() {
      return this.heightTrend === 'up' ? '#ffffff' : this.weightTrend === 'up' ? '#ffffff' : this.headTrend === 'up' ? '#ffffff' : '#95a5a6';
    }
  },
  onLoad() {
    this.getGrowthRecord();
  },
  methods: {
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = d.getMonth() + 1;
      const day = d.getDate();
      return `${year}年${month}月${day}日`;
    },
    showAddDialog() {
      this.currentRecord = {
        date: this.getCurrentDate(),
        height: null,
        weight: null,
        head: null
      };
    },
    getCurrentDate() {
      const date = new Date();
      return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    async getGrowthRecord() {
    try {
        const response = await childGet();
        const records = response?.map(({ recordedAt, headCircumference, ...rest }) => ({
            ...rest,
            date: recordedAt,
            head: headCircumference,
        })) || [];
        this.records = records;
    } catch (error) {
        console.error('Error fetching growth records:', error);
    }
}

  }
};
</script>

<style lang="scss" scoped>
/* 必须在样式最顶部定义所有变量 */
$text-primary: #2D3436;     // 主要文字
$text-secondary: #636E72;  // 次要文字
$primary: #6C5CE7;         // 主色
$secondary: #00B894;       // 辅助色
$accent: #FF7675;          // 强调色
$glass-bg: rgba(255, 255, 255, 0.9);
$primary-gradient: linear-gradient(135deg, #6C5CE7 0%, #A66EFA 100%);
$secondary-gradient: linear-gradient(135deg, #00B894 0%, #55EFC4 100%);
$accent-gradient: linear-gradient(135deg, #FF7675 0%, #FFA8A8 100%);

// 全局样式
.record-dialog {
  width: 90vw;
  max-width: 750rpx;
  background: $glass-bg;
  border-radius: 48rpx;
  backdrop-filter: blur(20px);
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  overflow: hidden;

  .dialog-header {
    padding: 48rpx;
    background: $primary-gradient;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 25%,
        rgba(255,255,255,0.1) 50%,
        transparent 75%
      );
      animation: shine 4s infinite linear;
    }

    .title {
      font-size: 44rpx;
      font-weight: 700;
      color: white;
      text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.2);
      position: relative;
    }

    .close-icon {
      font-size: 48rpx;
      color: rgba(255,255,255,0.9);
      transition: transform 0.3s ease;

      &:active {
        transform: scale(0.9);
      }
    }
  }

  .stats-grid {
    gap: 24rpx;
    padding: 0 32rpx;

    .stat-item {
      background: $glass-bg;
      border-radius: 24rpx;
      padding: 32rpx;
      backdrop-filter: blur(10px);
      box-shadow: 
        0 8rpx 32rpx rgba(0,0,0,0.05),
        inset 0 0 0 1px rgba(255,255,255,0.3);
      transition: transform 0.3s ease;

      &:active {
        transform: translateY(4rpx);
      }

      .stat-icon {
        width: 96rpx;
        height: 96rpx;
        border-radius: 24rpx;
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
      }

      .value {
        font-size: 48rpx;
        font-family: 'DIN Alternate';
        letter-spacing: -1px;
        background: linear-gradient(45deg, #2D3436 0%, #636E72 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .trend {
        padding: 8rpx 16rpx;
        border-radius: 40rpx;
        background: rgba(0,184,148,0.1);
        backdrop-filter: blur(4px);
      }
    }
  }

  .input-section {
    .tn-form-item {
      margin: 40rpx 0;
      
      ::v-deep .tn-input {
        background: rgba(255,255,255,0.8);
        border-radius: 16rpx;
        padding: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
        transition: all 0.3s ease;

        &:focus-within {
          box-shadow: 0 8rpx 24rpx rgba(108,92,231,0.2);
          background: white;
        }
      }
    }
  }

  .history-section {
    .record-item {
      background: rgba(255,255,255,0.8);
      border-radius: 16rpx;
      padding: 32rpx;
      margin-bottom: 24rpx;
      backdrop-filter: blur(10px);
      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 5%;
        width: 90%;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
      }

      .date {
        font-size: 28rpx;
        color: $text-secondary;
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;

        &::before {
          content: '📅';
          margin-right: 12rpx;
        }
      }

      .data-item {
        padding: 16rpx 24rpx;
        border-radius: 40rpx;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
      }
    }
  }

  .dialog-footer {
    background: $glass-bg;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding: 32rpx 48rpx;

    .tn-button {
      border-radius: 40rpx;
      overflow: hidden;
      position: relative;
      transition: all 0.3s ease;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.2);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:active::before {
        opacity: 1;
      }
    }
  }
}

@keyframes shine {
  from { transform: rotate(0deg) translateX(-50%); }
  to { transform: rotate(360deg) translateX(50%); }
}

// 颜色升级
$primary-green: #00C853;
$primary-blue: #2962FF;
$accent-orange: #FF6D00;
$text-dark: #2E3A44;
$text-light: #677483;
$primary-purple: #7E57C2;

// 统一样式优化
.container {
  padding: 32rpx;
  background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  
  .stat-card {
    position: relative;
    padding: 24rpx;
    border-radius: 16rpx;
    min-height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &.gradient-green {
      background: linear-gradient(135deg, #00B894 0%, #00D1A3 100%);
    }

    &.gradient-blue {
      background: linear-gradient(135deg, #0984E3 0%, #25A6FF 100%);
    }

    &.gradient-purple {
      background: linear-gradient(135deg, #7E57C2 0%, #9C27B0 100%);
    }

    .stat-content {
      .stat-text {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .label {
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.9);
        }

        .value {
          font-size: 40rpx;
          font-weight: 600;
          color: #ffffff;
          line-height: 1.2;
          display: flex;
          align-items: baseline;
          gap: 4rpx;

          .unit {
            font-size: 24rpx;
            font-weight: normal;
            opacity: 0.9;
          }
        }
      }
    }

    .stat-trend {
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding: 8rpx 16rpx;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20rpx;
      align-self: flex-start;
      margin-top: 16rpx;

      text {
        font-size: 24rpx;
        font-weight: 500;
      }
    }
  }
}

.input-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 40rpx;
  margin-bottom: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.06);
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .header-icon {
      font-size: 44rpx;
      margin-right: 20rpx;
    }

    .header-title {
      font-size: 38rpx;
      font-weight: 700;
      color: $text-dark;
      letter-spacing: -0.5rpx;
    }
  }

  .input-group {
    .input-item {
      background: #f8fafb;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
    }

    .input-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24rpx;
      margin-top: 24rpx;
    }

    .input-box {
      display: flex;
      align-items: center;
      background: #f8fafb;
      border-radius: 16rpx;
      padding: 28rpx 32rpx;
      border: 2rpx solid #e9ecef;
      transition: all 0.3s ease;

      &:focus-within {
        border-color: $primary-green;
        box-shadow: 0 4rpx 12rpx rgba($primary-green, 0.15);

        .uni-icons {
          opacity: 1;
          color: $primary-green;
        }
      }

      .uni-icons {
        transition: all 0.3s ease;
      }

      .modern-input {
        flex: 1;
        font-size: 34rpx;
        font-weight: 500;
        color: #2c3e50;
        height: 80rpx;

        &::placeholder {
          font-weight: 400;
        }
      }
    }
  }
}

.history-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.06);
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .header-icon {
      font-size: 44rpx;
    }

    .header-title {
      font-size: 38rpx;
    }
  }

  .history-list {
    max-height: 800rpx;
    padding: 0 40rpx 40rpx;

    .record-item {
      display: flex;
      padding: 40rpx 0;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 40rpx;
        right: 40rpx;
        bottom: 0;
        height: 1rpx;
        background: #f0f0f0;
      }

      &.first-item {
        .timeline-marker {
          background: #FFCA28;
          border-color: #FFCA28;
        }
      }
    }

    .timeline-marker {
      width: 32rpx;
      height: 32rpx;
      border: 6rpx solid #ddd;
      border-radius: 50%;
      margin-right: 32rpx;
      flex-shrink: 0;
      position: relative;
      top: 12rpx;
      background: #fff;
      transition: all 0.3s;
    }

    .record-content {
      flex: 1;

      .record-date {
        display: block;
        color: $text-secondary;
        font-size: 30rpx;
        font-weight: 500;
        margin-bottom: 16rpx;
      }

      .record-data {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32rpx;

        .data-item {
          display: flex;
          align-items: center;
          padding: 20rpx 32rpx;
          border-radius: 16rpx;
          background: #f8fafb;
          transition: transform 0.3s ease;

          &:active {
            transform: scale(0.98);
          }

          &.height {
            background: linear-gradient(45deg, rgba($primary-green,0.1) 0%, rgba($primary-green,0.05) 100%);
          }

          &.weight {
            background: linear-gradient(45deg, rgba($primary-blue,0.1) 0%, rgba($primary-blue,0.05) 100%);
          }

          &.head {
            color: $primary-purple;
            background: linear-gradient(45deg, rgba($primary-purple,0.1) 0%, rgba($primary-purple,0.05) 100%);
          }

          text {
            font-size: 32rpx;
          }
        }
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 0;

    .empty-icon {
      font-size: 80rpx;
      opacity: 0.7;
      margin-bottom: 32rpx;
    }

    .empty-text {
      font-size: 32rpx;
      color: $text-light;
      letter-spacing: 0.5rpx;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  .uni-icons {
    font-size: 40rpx;
    color: #4CAF50;
    margin-left: 30rpx;
  }
}

.container {
  background: #f8fafb;
  min-height: 100vh;
}

.number-input {
  display: flex;
  align-items: center;
  .input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
    
    &:focus {
      border-color: #4CAF50;
      outline: none;
    }
    
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
  .unit {
    font-size: 24rpx;
    color: #78909c;
    margin-left: 6rpx;
  }
}

// 小屏幕适配
@media screen and (max-width: 375px) {
  .overview-grid {
    grid-template-columns: repeat(2, 1fr);
    
    .stat-card {
      min-height: 160rpx;
      
      .stat-content {
        .stat-text {
          .value {
            font-size: 36rpx;
          }
        }
      }
    }
  }
}
</style> 